﻿<!doctype HTML>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- 스타일시트 선언 -->
	<link href="./css/bootstrap.min.css" rel="stylesheet">
	<link href="./css/bootstrap-slider.min.css" rel="stylesheet">
	<link href="./css/common.css" rel="stylesheet">
	<link href="./css/scrollbar.css" rel="stylesheet">
	<style>
		#logPreview {
			padding-left: 15px;
			overflow: auto;
		}

		.slider {
			width: 100% !important;
		}

		.logList {
			overflow-x: scroll;
			overflow-y: hidden;
			white-space: nowrap;
		}

		.logList button {
			margin-left: 10px;
		}


		.fadeicon {
			width: 24px;
			height: 24px;
			background-color: #ffffff;
			transition: background-color 0.2s ease-out;
		}

		.fadeicon:hover {
			background-color: #1E88E5;
		}
	</style>

	<!-- 자바스크립트 선언 -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/themes/prism-coy.min.css" />
	 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/plugins/line-numbers/prism-line-numbers.min.css" />
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/prism.min.js"></script>
	 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/plugins/autoloader/prism-autoloader.min.js"></script>
	 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.13.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-slider.min.js"></script>
	<script type="text/javascript" src="js/moment.js"></script>

	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/listen.js"></script>
	<script type="text/javascript" src="js/uiFuncitons.js"></script>
	<script type="text/javascript" src="js/audioFunctions.js"></script>
	<script type="text/javascript" src="js/translate.js"></script>
	<script type="text/javascript" src="js/logitem.js"></script>
	<script>
		function printData(data, callback) {
			var decType = data.type & 255;
			var type = getType(decType);
			//console.log("raw data: " + data.data + " / type:" + decType);
			if (!filterLog(type)) return false;
			var config = getLogItem(decType);
			if (config == undefined) {
				config = getLogItem(-1);
			}
			if (config.visibility == false) return false;
			translate(data.data, config.translation, function (text) {
				$("#logPreview").append('<div class="code' + decType + ' fstyle" style="color: ' + config.color + ';" >' +
					config.format.replace("/teller/", data.nickname).replace("/content/", text).replace("/timestamp/", getTimeStampSpan(data.timestamp)) +
					'</div>');
				sound(data, config);
				callback();
			});
			return true;
		}

		document.addEventListener("onOverlayDataUpdate", function (data) {
			if (!data.detail)
				return;

			if (!window.meter)
				window.meter = new window.Data(data.detail);
			else
				window.meter.update(data.detail);
		});

		document.addEventListener("onLogLine", function (data) {
			if (!data.detail)
				return;

			if (data.detail.opcode == 0) {
				window.timeline.push({
					timestamp: new Date(data.detail.timestamp).getTime(),
					type: parseInt(data.detail.payload[0], 16),
					nickname: escapeLog(data.detail.payload[1]),
					data: escapeLog(data.detail.payload[2])
				});

				if (!window.pauseTimeline) {
					printData(window.timeline[window.timeline.length - 1], function () {
						autoScroll();
						lineLimitation();
					});
				}
			}
			else if (data.detail.opcode == 1) {
				window.logline.push({
					timestamp: new Date(data.detail.timestamp).getTime(),
					type: -10,
					index: window.timeline.length - 1,
					data: window.lastZone
				});

				window.lastZone = data.detail.payload[1];
			}
		});

		$(window).load(function () {
			firstRunInitialize();
			resetTimeline();
			setHeight();
			$(window).resize(setHeight);
			activePlugin();
		});

		function sound(data, config) {
			var username = getUserName();
			if (username.length > 0) {
				username = username.split(',');
				for (var i = 0; i < username.length; i++) {
					if (data.nickname == username[i]) return;
					if (config['keynotification'] == true) {
						if (data.data.indexOf(username[i]) > -1) {
							playSnd('tell1');
							return;
						}
					}
				}
			}

			if (config['notification'] == true) {
				playSnd('tell3');
			}
		}

		function firstRunInitialize() {
			if (localStorage.isFirstRun == undefined) {
				initializeUtilValues();
				initializeLogItems();
			}
		}
	</script>
</head>

<body style="background-color: rgba(0, 0, 0, .8);">
	<div id="titleBar" style="background-color: rgba(0, 0, 0, .9);">
		<div class="container" style="height:30px;">
			<span style="color:#ffffff; margin-left: 1rem;">FFXIV Chat Overlay</span>
			<div class="nyeol"></div>
			<span class="fadeicon" style="mask-image: url('./svg/delete.svg'); -webkit-mask-image: url('./svg/delete.svg');" onclick="resetTimeline(); setHeight();"></span>
			<span class="fadeicon" style="mask-image: url('./svg/settings.svg'); -webkit-mask-image: url('./svg/settings.svg'); margin: 0.5rem;"
			 onclick="window.open('settings.html', '설정','width=580,height=500'); "></span>
		</div>
	</div>
	<div id="logPreview"></div>
</body>

</html>